/**
 * useEffect()
 *
 *    1. Effect 叫副作用：
 *    2. 语法：
 *      useEffect(effect, deps)
 *      1. 第一个参数 effect 就是副作用函数
 *      2. 第二个参数 deps 是依赖项数组   [a, b, c, d]
 *      3. 该 effect 函数会默认触发一次（组件挂载完成），后续当依赖项发生变化会引起该函数的重新执行（组件真实DOM更新完成）
 * 
 *    3. 模拟 componentDidMount()
 *      PS: 关键在于是一个空的依赖项数组。
 * 
 *      useEffect(() => {
          console.log("effect");
        }, []);

      4. 模拟 componentDidMount() + componentDidUpdate()
        
        useEffect(() => {
          console.log("effect");
        }, [count]);

      5. 模拟 componentWillUnmount()
        
        PS: effect 函数内部返回一个函数，该函数的触发时机就是组件卸载之前
        useEffect(() => {
          console.log("effect");
          return () => {
            // 清理工作
          }
        }, []);

        PS: effect 函数内部返回一个函数，该函数的触发时机就是组件卸载之前，还会在count修改引起 effect 再次调用是先执行 清理
        useEffect(() => {
          console.log("effect");
          return () => {
            // 清理工作
          }
        }, [count]);
 */

import { Space, Button } from "antd";
import { useEffect, useState } from "react";

function Hello({ num }) {
  useEffect(() => {
    console.log("Hello effect");

    return () => {
      console.log("Hello 清理");
    };
  }, [num]);

  return <p>Hello 组件</p>;
}

export default function App() {
  const [count, setCount] = useState(1);
  const [msg, setMsg] = useState("~");

  useEffect(() => {
    console.log("App effect");
  }, [count, msg]);

  return (
    <div>
      <h1>useEffect</h1>

      <Space>
        <Button id="btn" onClick={() => setCount((count) => count + 1)}>
          {count}
        </Button>

        <Button onClick={() => setMsg((msg) => (msg += "~"))}>{msg}</Button>
      </Space>

      {count <= 3 && <Hello num={count} />}
    </div>
  );
}
